<template>
	<!-- 发现页导航栏组件 -->
	<view class="tabBar">
		<view class="tabbarTop">
			<scroll-view class="scroll-view_H" scroll-x="true" :scroll-left='scollLeft'>
				<!-- 发现页 -->
				<view class="scroll-view-item_H" v-for="(item,index) in tabBars" :key="index" @click="indexBtn(item,index)"
					:style="{color:index==tabIndex?selectedTextColor:textColor}" :class="{'active':index==tabIndex}">
					<text class="lineBtom">{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'TabbarSwiper',
		props: {
			//导航字体选中时的颜色
			selectedTextColor: {
				type: String,
				default: '#546eff'
			},
			//导航字体默认颜色
			textColor: {
				type: String,
				default: '#606266'
			},
			//导航文本
			tabBars: {
				type: Array,
				// default: [{
				// 	name: "1"
				// }, {
				// 	name: "2"
				// }, {
				// 	name: "3"
				// }, {
				// 	name: "4"
				// }]
				default:[]
			},
			swiperIndexInfo:{
				type:Number
			}
		},
		data() {
			return {
				tabIndex: 0, //当前选中的项下标
			}
		},
		watch:{
			tabBars:{//导航文本改变时监听一次
				handler(newName,oldName){
					//子传父
					this.$emit("tabBar",{
						data:newName[0],//当前选中项
						tabIndex:this.tabIndex//当前选中下标
					})
				},
				immediate: false,
				deep: false
			},
			tabIndex: {//选中项改变时又监听一次
			    handler(newName, oldName) {
				  //子传父
				  this.$emit("tabBar",{
					  data:this.tabBars[newName],//当前选中项
					  tabIndex:this.tabIndex//当前选中下标
				  })
			    },
			    immediate: false,
			    deep: false
			},
			swiperIndexInfo:{//页面左右滑动时又监听一次
				handler(newName, oldName) {
				  this.tabIndex=newName
				},
				immediate: true,
				deep: false
			}
		},
		methods: {
			//点击后得到当前下标索引值，并根据当前下标索引值去更改操作和切换视图
			indexBtn(item,index) {
				this.tabIndex = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabBar{
		position: fixed;
		width: 100%;
		background-color: #fff;
		z-index: 999;
	}
	.tabbarTop{
		// height: 78rpx;
		overflow: hidden;
		background-color: #fff;
	}
	//发现页样式
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		.scroll-view-item_H {
			display: inline-block;
			width: 25%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			.lineBtom{
				padding: 10rpx 0;
			}
		}
		.active {
			font-weight: 600;
			.lineBtom{
				border-bottom: 2px solid #546eff;
			}
		}
	}

</style>
